<template>
    <div class="searchlist">
        <div class="content">
            <van-list v-if="total > 0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div  v-for="item in list" :key="item.index" @click="changeDetail(item.id)">
                    <div class="list-box">
                        <img class="notifyIcon" :src="item.head_img" alt="">
                        <div class="box-right">
                            <div class="list-title">{{item.title}}</div>
                            <!-- <div class="list-time">视频时长：{{item.video_time}}</div> -->
                        </div>
                    </div>
                </div>
            </van-list>
            <div class="noData" v-if="total == 0">
                暂无数据
            </div>
        </div>
        <!-- 没有更多了 -->
        <div v-if="finished" class="notMore">——&nbsp;没有更多了&nbsp;——</div>
    </div>
</template>

<script>
import { Toast,List,Dialog  } from 'vant';
import {getSearchList} from '@/api/public'
export default {
    name:'searchlist',
    //声明组件
    components:{
        [List.name]:List,
        [Toast.name]:Toast,
        [Dialog.name]:Dialog
    },
    data(){
        return {
            loading:false,//列表加载中
            finished:false,//列表是否加载完成
            list:[],//搜索结果列表
            pageIndex:1,
            pageSize:10,
            total:0,//总条数
            keyword:''
        }
    },
    created(){
        if(this.$route.query.keyword){
            this.keyword = this.$route.query.keyword;
        }
        this.getSearchList();//获取留言列表
    },
    methods:{
        //获取列表
        getSearchList(){
            //加载状态
            this.loading = true;
            getSearchList(this.keyword,this.pageIndex,this.pageSize).then(res => {
                if(res.code == 200){
                    if(this.pageIndex > 1){
                        let lists = this.list;
                        this.list = lists.concat(res.data.list);
                        //加载状态
                        this.finished = false;
                        this.loading = false;
                    }else if(this.pageIndex == 1) {
                        this.list = res.data.list;
                        //加载状态
                        this.finished = false;
                        this.loading = false;
                    }else {
                        //加载状态
                        this.finished = false;
                        this.loading = false;
                    }
                    this.total = res.data.total;
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                }
            })
        },
        // 上滑懒加载
        onLoad(){
            setTimeout(()=>{
                this.pageIndex++;
                if(this.list.length != this.total){
                    this.getSearchList();//加载更多
                    
                }else {
                    //加载状态
                    this.finished = true;
                    this.loading = false;
                }
            },500);
        },
        //查看视频详情，h5跳转原生页
        changeDetail(id){
            let para = {};
            para.id = id;//视频id
            para.linkType = 'detail',//视频详情
            this.interaction.hLinkToApp(para);
        },
    }
    
}

</script>

<style lang="stylus" scoped>
//无列表
.noData {
    width:100%;
    margin-top :1.066667rem;
    text-align :center;
    font-size:.426667rem;
    color:#a2a2a2;
}
 .searchlist{
    width :100%;
    height :100%;
    .content{
        width:100%;
        .list-box {
            padding:.266667rem;
            padding-bottom :.266667rem;
            border-bottom:.026667rem solid #f1f1f1;
            display:inline-block;
            .notifyIcon {
                width:3.2rem;
                height:1.44rem;
                float:left;
            }
            .box-right {
                float:left;
                margin-left :.32rem;
                .list-title {
                    width:5.8rem;
                    line-height :.533333rem;
                    font-size:.373333rem;
                    color:#494949;
                    margin-bottom :.133333rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2; 
                    overflow: hidden;
                }
                .list-time {
                    font-size:.266667rem;
                    color:#a2a2a2;
                    margin-bottom :.266667rem;
                }
            }
        }
        .noData {
            width:100%;
            text-align :center;
            font-size:.373333rem;
            color:#a2a2a2;
        }
    }
    .notMore {
        width: 10rem;
        height: 1.066667rem;
        line-height: 1.066667rem;
        font-size: .373333rem;
        color: #A2A2A2;
        text-align: center;  
    }
}    
</style>